Changing FlashAir SSID and Network Password

Latest update: July 2013

It is good idea to change the SSID and the network key to ensure a safe communication via Wireless LAN. This tutorial will explain how to set the SSID and network key of your FlashAir device.

In this tutorial, we will create a web application which can configure the SSID and network key of your FlashAir device. You can use command.cgi to get the current SSID and network key, and config.cgi to set the SSID and network key.

NOTE: It is not possible to get or set the network key if the FlashAir is configured to the Station mode. Please configure the card to the Access Point mode.

MASTERCODE

We need MASTERCODE to change the configuration of the FlashAir. MASTERCODE is a kind of password to restrict access to the configuration file to the authorized users.

Usually the MASTERCODE is the MAC address of the device that the FlashAir was set up with if we use the official Browser Utility or smartphone apps. We will use an API to get the MAC address and use it as the MASTERCODE for this sample program.

We assume the FlashAir card is initialized with the official tools, and we will use the same device used for the initialization as a target device in this tutorial.

Creating View Layout

As well as we do in the previous tutorials, the HTML file will consists of several elements: loading external JavaScript file, preparing tags as a place holder to show MASTERCODE (MAC address), SSID and network key, and a button to apply new configuration to the FlashAir.

NOTE: We have displayed the MASTERCODE in this tutorial application to demonstrate how the FlashAir device works. This information is provided for tutorial purposes only. For security reasons, we highly discourage you from publicly displaying your MASTERCODE. Also, password should be hidden by masking characters like ********.

We will save the HTML file as /SD_WLAN/Config.htm on the FlashAir.

/SD_WLAN/Config.htm 

<!doctype html>
<html>
<head>
<title>FlashAir</title>
<meta charset="UTF-8">
<title>Flash Air Configuration</title>
<script type="text/javascript" src="/SD_WLAN/js/jquery.js"></script>
<script type="text/javascript" src="/SD_WLAN/js/config.js"></script>
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<hr>
<div><a href="/">Back to TopPage</a></div>
<div id="formarea"> 
Mastercode<br>
<span id="mastercode"></span><br>
SSID<br>
<input name="appssid" id="appssid" type="text" value="" maxlength="32" /><br>
Password<br>
<input name="appnetworkkey" id="appnetworkkey" type="text" value="" maxlength="63"/><br>
<button id="submit">submit</button><span id="result"></span>
</div>
<hr>
<div id="footer">
footer
</div>
</body>
</html>
  • Lines 18, 20, 22:
    There is a space to show and edit the MASTERCODE, SSID and network key. We will set the unique names to id attribute in order to access them from the JavaScript program.
  • Line 22:
    To mask the password, add an atribute type="password".

Getting, Showing, and Editing

When the page is loaded, you will get the MASTERCODE, APPSSID, and APPNETWORKKEY after command.cgi is called.

When you call config.cgi on click the button, you can set new values for the APPSSID and APPNETWORKKEY.
If this command is successful, SUCCESS is returned.
Otherwise, ERROR is returned. The return value will be shown on screen.

/SD_WLAN/js/config.js 

// JavaScript Document
function getMasterCode(){
    var url="/command.cgi?op=106";
    $.get(url,function(data){
        $('#mastercode').text(data);
        mastercode=data;
    });
}
function getSSID(){
    var url="/command.cgi?op=104";
    $.get(url,function(data){
        $('#appssid').val(data);
    });
}
function getAPPNETWORKKEY(){
    var url="/command.cgi?op=105";
    $.get(url,function(data){
        $('#appnetworkkey').val(data);
    });
}
function setParams(){
    var datetime = new Date();
    var url="/config.cgi?MASTERCODE="+mastercode
            +"&APPSSID="+$("#appssid").val()
            +"&APPNETWORKKEY="+$("#appnetworkkey").val()
            +"&TIME="+datetime.getTime();
    $.get(url,function(data){
        $('#result').text(data);    
    });
}
//Document Ready
$(function() {
    getMasterCode();
    getSSID();
    getAPPNETWORKKEY();
    $("#submit").click(setParams);
});
  • Lines 2-8:
    The MASTERCODE is retrieved using the getMasterCode() function. Inside this function, a call is made to command.cgi?op=106 and the response is stored for later use.
  • Lines 9-14:
    The SSID is retrieved using the getSSID() function. Inside this function, a call is made to command.cgi?op=104.
  • Lines 15-20:
    The network key is retrieved using the getAPPNETWORKKEY() function. Inside this function, a call is made to command.cgi?op=105.
  • Lines 21-30:
    This function is where the values of the parameters are set and a call to config.cgi is made. We have added the current time to the URL in order to prevent a cached response (line 26).
  • Line 36:
    Lines 36 bind the setParams() function (line 21) to a click event.

Result

Save the program on the FlashAir, and open your web browser on your PC or smartphone connected to the FlashAir. Input the following URL into the URL box of your web browser.

http://flashair/SD_WLAN/Config.htm

The current configurations will be shown on the screen. (Left image.) You can modify the configuration as you edit the values and click submit button. If this command is successful, SUCCESS will be shown. (Right image.)
Note that wireless connection will be disconnected after configuration command is issued. You need to reconnect your device to the FlashAir with the new SSID.

Browser Utility Tutorial 6 Result

Sample Code

web_tutorial_06.zip (2KB)

All sample code on this page is licensed under BSD 2-Clause License